<script>
import ChangePwd from "@/components/ChangePwd"
import switchSiteJs from "@/mixins/switchSite.js"

export default {
  mixins: [switchSiteJs],
  components: {
    ChangePwd
  },
  methods: {
    logout() {
      this.handleLogout()
    },
    showChangePwd() {
      this.$refs.changePwd.openChangePwd();
    },
    // 跳转
    toWebsite(url, type = "") {
      this.jumpUrl(url, type);
    },
    renderHeader() {
      return <div class="header">
        <div class="title">青山湖区智慧城管平台</div>
        <div class="user-box">
          <div>
            <i class="icon el-icon-user"></i>
            <span on-click={this.showChangePwd}>{ this.userInfo.userName || "" }，欢迎您~</span>
          </div>
          {this.userInfo.isPlatformManager && this.userInfo.platformSite ?
            <div>
              <i class="icon el-icon-setting"></i>
              <span
                on-click={this.toWebsite.bind(this, this.userInfo.platformSite.manageUrl,'manager')}
              >{ this.userInfo.platformSite.projectName }</span>
            </div>
            :""}
          <div>
            <i class="icon icon-exit"></i>
            <span on-click={this.logout}>退出</span>
          </div>
        </div>
      </div>
    },
    renderMoreSiteTypes() {
      return this._l(this.siteTypes, siteType => {
        return <div>
          <div class="site-type-box">
            <div class="site-type">
              <i class={["icon", siteType.icon]}></i>
              <span class="text">{ siteType.name }</span>
            </div>
            {
              this._l(siteType.sites, item => {
                return <div class="site" on-click={this.toWebsite.bind(this, item.tokenUrl)}>
                  {item.projectName}
                  {
                    item.isSiteManager ? 
                    <i
                      class="el-icon-setting icon"
                      on-click={this.toWebsite.bind(this, item.manageUrl, 'manager')}
                    ></i> : ""
                  }
                </div>
              })
            }
          </div>
        </div>
      })
    },
    renderSingleSiteType() {
      return <div class="site-type-single-box">
      {
        this._l(this.siteTypes[0].sites, item => {
          return <div class="site" on-click={this.toWebsite.bind(this, item.tokenUrl)}>
              <i class={["icon", `icon-${item.appLogo || ""}`]} />
              <span class="text">{ item.projectName || "" }</span>
              {
                item.isSiteManager ? <i
                class="el-icon-setting"
                on-click={this.toWebsite.bind(this, item.manageUrl || "", 'manager')}
              ></i> : ""
              }
            </div>
        })
      }
      </div>
    }
  },
  render() {
    return <div class="bg-menu-xs">
      {this.renderHeader()}
      <div class="main">
        {
          this.siteTypesLength > 1 ? 
            this.renderMoreSiteTypes() : 
          this.siteTypesLength === 1 ? 
            this.renderSingleSiteType() : ''
        }
      </div>
      <ChangePwd ref="changePwd" />
    </div>
  }
}
</script>

<style lang="scss">
.less-siteTypes {
  justify-content: space-around;
}
.bg-menu-xs {
  left: 0;
  right: 0;
  overflow-x: auto;
  width: 100%;
  height: 100%;
  position: fixed;
  background: url(~@/assets/images/qsh/bg-login.png) no-repeat center center
    fixed;
  background-size: 100% 100%;
  .header {
    width: 100%;
    min-width: 1580px;
    height: 100px;
    line-height: 100px;
    margin-top: 40px;
    position: relative;
    display: flex;
    justify-content: center;
    .title {
      height: 102px;
      line-height: 100px;
      width: 580px;
      text-align: right;
      display: inline-block;
      font-size: 48px;
      font-family: HiraginoSansGB-W6, HiraginoSansGB;
      font-weight: normal;
      color: #fff;
      text-shadow: 0px 0px 10px #0057ff;
      background: url(~@/assets/images/qsh/logo.png) no-repeat left center;
      background-origin: 0 0;
    }
    .user-box {
      position: absolute;
      top: 0;
      right: 10px;
      div {
        display: inline-block;
        .icon {
          color: #fff;
          font-size: 20px;
          margin-right: 4px;
        }
        span {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #fff;
          margin-right: 30px;
          cursor: pointer;
        }
      }
    }
  }
  .main {
    width: 1580px;
    margin: 100px auto 0;
    position: relative;
    display: flex;
    justify-content: space-around;
    .site-type-box {
      .site-type {
        text-align: center;
        margin-bottom: 36px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .icon {
          width: 60px;
          height: 60px;
          margin-bottom: 14px;
          &.zhiHuiChengGuan {
            background: url(~@/assets/images/qsh/zhiHuiChengGuan.png) no-repeat
              center center;
          }
          &.zhiHuiZhongXin {
            background: url(~@/assets/images/qsh/zhiHuiZhongXin.png) no-repeat
              center center;
          }
          &.zhuanXiangGuanLi {
            background: url(~@/assets/images/qsh/zhuanXiangGuanLi.png) no-repeat
              center center;
          }
          &.zongHeZhiFa {
            background: url(~@/assets/images/qsh/zongHeZhiFa.png) no-repeat
              center center;
          }
        }
        .text {
          font-size: 30px;
          font-family: PingFangSC-Semibold, PingFang SC;
          color: #fff;
          line-height: 30px;
          text-shadow: 0px 0px 10px #0057ff;
        }
      }
      .site {
        position: relative;
        font-size: 26px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4aa7ff;
        width: 280px;
        height: 120px;
        line-height: 120px;
        text-align: center;
        background: url(~@/assets/images/qsh/site-bg1.png) no-repeat center
          center;
        cursor: pointer;
        &:hover {
          background-image: url(~@/assets/images/qsh/site-bg2.png);
          color: #fff;
          text-shadow: 0px 0px 10px #0057ff;
        }
        .icon {
          width: 16px;
          height: 16px;
          position: absolute;
          bottom: 14px;
          right: 10px;
          color: #4aa7ff;
          font-size: 20px;
          &:hover {
            color: #fff;
            text-shadow: 0px 0px 10px #0057ff;
          }
        }
      }
    }
    .site-type-single-box {
      display: flex;
      width: 100%;
      justify-content: space-around;
      align-items: center;
      .site {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 280px;
        height: 214px;
        background: url(~@/assets/images/qsh/site-bg-l1.png) no-repeat center
          center;
        font-size: 30px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4aa7ff;
        line-height: 30px;
        cursor: pointer;
        &:hover {
          background-image: url(~@/assets/images/qsh/site-bg-l2.png);
          color: #fff;
          text-shadow: 0px 0px 10px #0057ff;
        }
        .icon {
          width: 40px;
          height: 40px;
          margin-bottom: 20px;
          line-height: 40px;
          text-align: center;
          font-size: 44px;
        }
        .el-icon-setting {
          width: 16px;
          height: 16px;
          position: absolute;
          bottom: 14px;
          right: 10px;
          color: #4aa7ff;
          font-size: 20px;
          &:hover {
            color: #fff;
            text-shadow: 0px 0px 10px #0057ff;
          }
        }
      }
    }
  }
}
</style>
